<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			margin: 18% auto;
			width: 640px;
			height: 100px;
		}
		select{
			width: 200px;
			height: 100px;
			font-size: 26px;
			float: left;
		}
		#se2{
			display: none;
		}
		#se3{
			display: none;
		}
	</style>
</head>
<body>
	<div>
		<select name="" id="se1">
		</select>
		<select name="" id="se2">
		</select>
		<select name="" id="se3">
		</select>
	</div>
	<script>
	function v(e){
		return document.getElementById(e);
	}
	var arr1=["吃","喝","穿"];
	var arr2=[["肉","饭"],["水","茶"],["衣","裤"]];
	var arr3=[[["鸡肉","牛肉"],["大米","小米"]],[["白水","黑水"],["绿茶","黄茶"]],[["衬衫","毛衫"],["短裤","长裤"]]];
	var se1val="";
	for (var i = 0; i < arr1.length; i++) {
		se1val=se1val+"<option>"+arr1[i]+"</option>";
		v("se1").innerHTML=se1val;
	}
	// for (var i = 0; i < arr2.length; i++) {
	// 	for (var n = 0; n < arr2[i].length; n++) {
	// 		v("se2").innerHTML="<option>"+arr2[i][n]+"</option>";
	// 	}
	// }
	// for (var i = 0; i < arr3.length; i++) {
	// 	for (var n = 0; n < arr3[i].length; n++) {
	// 		v("se3").innerHTML="<option>"+arr3[i][n]+"</option>";
	// 	}
	// }
	//以上是将数组中的数据导入下拉框
	
	v("se1").onchange=function(){
		var index1=se1.selectedIndex;
		var se2val="";
		for (var n = 0; n < arr2[index1].length; n++) {
			se2val=se2val+"<option>"+arr2[index1][n]+"</option>";
		}
		v("se2").innerHTML=se2val;
		v("se2").style.display="block";

		var index2=se2.selectedIndex;
		var se3val="";
		for (var i = 0; i < arr3[index1][index2].length; i++) {
				se3val=se3val+"<option>"+arr3[index1][index2][i]+"</option>";
		}
		v("se3").innerHTML=se3val;
	}
	v("se2").onchange=function(){
		var index1=se1.selectedIndex;
		var index2=se2.selectedIndex;
		var se3val="";
		for (var i = 0; i < arr3[index1][index2].length; i++) {
				se3val=se3val+"<option>"+arr3[index1][index2][i]+"</option>";
		}
		v("se3").innerHTML=se3val;
		v("se3").style.display="block";
	}
	</script>
</body>
</html>